<template>
  <div class="red_bac" @touchmove.prevent @click.stop="close()" >
    <div class="red_package" @click.stop="closes($event)">
      <div class="red_package_outer" >
        <image class="red_package_bac_img" :mode="'aspectFill'" :src="red_cover" v-if="red_cover != ''"></image>
        <image class="red_package_bac_img" :mode="'aspectFill'" src="~@/static/sports/bac_demo.png" v-if="red_cover == ''"></image>
        <div class="red_package_button" @click="openPackage()">
          <image class="red_package_button_img" :class="{'button_roate':roateStyle}" :mode="'scaleToFill'" src="~@/static/sports/package_open.png"></image>
        </div>
        <div class="red_package_bottom">
          <image class="red_package_bottom_img" :mode="'scaleToFill'" src="~@/static/sports/package_bottom.png"></image>
        </div>
      </div>
    </div>
    <div class="close_button">
      <image :src="qiniuUrl+'close.png'" mode="aspectFill" @click.stop="close"></image>
    </div>
  </div>

</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: "redPackage",
  data() {
    return {
      roateStyle:false,
    }
  },
  props:{
    red_cover:{
      type:String,
      default:'',
    }
  },
  computed: {
    ...mapGetters({qiniuUrl:'qiniuUrl'})
  },
  methods: {
    openPackage(){
      this.roateStyle = true
      let _this = this
      setTimeout(function () {
        _this.roateStyle = false
        _this.$emit('getPackage')
      }, 800)
    },
    close() {
      this.$emit('hideRed')
    },
    closes(event){
      event.stopPropagation()
    }
  },
  mounted() {

  }
}
</script>

<style scoped lang="scss">
@import "src/common/common.scss";
.red_bac{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 98;
  background: linear-gradient(to bottom, rgba(96, 82, 82, 0), rgba(107, 107, 107, 1));
}
.red_package {
  @include center;
  width: 66%;
  animation: backInUp 1s;
  z-index: 99;
  .red_package_outer {
    position: relative;
    width: 100%;
    height: 800rpx;
    background: rgb(244, 93, 75);
    border-radius: 20rpx;
    overflow: hidden;
    .red_package_bac_img{
      width: 100%;
      height: 640rpx;
      border-radius: 20rpx;
      z-index: 100;
    }
    .red_package_button {
      width: 140rpx;
      height: 140rpx;
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0%);
      bottom: 100rpx !important;
      z-index: 102;
      .red_package_button_img {
        width: 100%;
        height: 100%;
      }
    }
    .button_roate{
      animation: roate 880ms;
    }
    .red_package_bottom {
      width: 100%;
      height: 240rpx;
      position: absolute;
      bottom: 0rpx;
      z-index: 101;
      .red_package_bottom_img {
        width: 100%;
        height: 100%;

      }
    }
  }
}
.close_button{
  width: 70rpx;
  height: 70rpx;
  position: absolute;
  bottom: 150rpx;
  left: 50%;
  transform: translate(-50%,0%);
  image{
    width: 100%;
    height: 100%;
  }
}
@keyframes backInUp {
  0% {
    -webkit-transform: translate(-50%, -150%) scale(0.7);
    transform: translate(-50%, -150%) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
@keyframes roate{
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
    rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
    rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
    rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
    rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
    rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
    rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
</style>